<template>
    <view class="categorize">
        <view class="categorizeBox">
            <view class="loadBox" v-if="!load">
                <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
            </view>
            <block>
                <view class="navBox">
                    <topStatus></topStatus>
                    <view class="tabsBack">
                        <image class="logoimg"
                            src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732240223144208.png"></image>
                    </view>
                    <view class="searchCell" @click="nav_to('/pages/store/searchShop')">
                        <image src=" https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732240800513109.png"
                            class="searchimg">
                        </image>
                        <view class="scInp">
                            <input disabled type="text" v-model="searchContent" placeholder="| 点击搜索商品"
                                placeholder-class="placname" />
                        </view>
                        <view class="scBtnBox">
                            <view class="scSumBtn">搜索</view>
                        </view>
                    </view>
                </view>
                <view class="cateBox" :style="{ height: 'calc(100vh - ' + fixboxHeight + 'px)' }">
                    <view class="cateLeft">
                        <block v-for="(item, index) in cateList" :key="index">
                            <view class="clCell"
                                :class="[index == chooseCate.index ? 'clCellActive' : '', index == chooseCate.index - 1 ? 'clCellAcTop' : '', index == chooseCate.index + 1 ? 'clCellAcBottom' : '']"
                                @click="clickCate(item, index)">
                                <view class="clCTit">
                                    {{ item.CataName }}
                                </view>
                            </view>
                        </block>
                        <view class="clBgBox"></view>

                    </view>
                    <view class="cateRight">
                        <scroll-view id="scrollview" :scroll-top="scrollTop" :scroll-with-animation="true"
                            :scroll-y="true" :scroll-anchoring="true" class="scroll-wrap" @scrolltolower="scrolltolower"
                            :style="{ height: 'calc(100vh - ' + fixboxHeight + 'px)' }">
                            <view class="shopBox">
                                <view class="shopSwiper">
                                    <swiper v-if="bannerList.length" class="barimg" :indicator-dots="true"
                                        :autoplay="true" :interval="3000" :duration="1000"
                                        indicator-active-color="#ff531c">
                                        <swiper-item v-for="(item, index) in bannerList" :key="index"
                                            @click="gotobanner(item)">
                                            <image :src="item.Banner" mode="aspectFill"></image>
                                        </swiper-item>
                                    </swiper>
                                </view>
                                <view class="shopBoxList">
                                    <view class="shopCellBox" v-for="(item, index) in shopList" :key="index">
                                        <view class="heat_shop" @click="goDetail(item.ID)">
                                            <image class="heat_spimg" :src="item.Images.split(',')[0]"
                                                mode="aspectFill">
                                            </image>
                                            <view class="right_shop">
                                                <view class="heat_spname">{{ item.ProductName }}</view>
                                                <view class="good_label"
                                                    :class="item.PromotionType == '预售' ? 'good_label_green' : ''"
                                                    v-if="item.PromotionType">
                                                    {{ item.PromotionType }}
                                                </view>

                                                <view class="heat_price_box">
                                                    <view class="heat_price">
                                                        <text class="pr_icon">￥</text>{{ item.Price }}
                                                    </view>
                                                    <!-- <view class="heat_payCount">
                                                        已售 {{ getPayCount(item.VirtualSellNum) || '0' }}
                                                    </view> -->
                                                </view>
                                                <view class="shopBtnBox">
                                                    <view class="heat_payCount">
                                                        已售 {{ getPayCount(item.VirtualSellNum) || '0' }}
                                                    </view>
                                                    <view class="shopAddBtn">
                                                        <image class="pay_icon"
                                                            src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1739781720696810.png">
                                                        </image>
                                                        <view class="pay_text" @click.stop="addShop(item)">加购</view>
                                                    </view>
                                                </view>
                                            </view>


                                        </view>
                                    </view>

                                </view>
                            </view>
                        </scroll-view>
                    </view>
                </view>
                <!-- <BtmLogo></BtmLogo> -->
                <!-- <view style="height: 20rpx;"></view> -->
                <uni-popup ref="buyNember" type="bottom" border-radius="24">
                    <view class="obj_choose">
                        <view class="obj_preview">
                            <view class="obj_img">
                                <image :src="shopDetails.Images ? shopDetails.Images.split(',')[0] : ''"
                                    mode="aspectFill">
                                </image>
                            </view>
                            <view class="obj_info">
                                <view class="obj_price">
                                    <block v-if="selectedStyle.Promotion">
                                        <view class="obj_price_text">
                                            单价
                                        </view>
                                        <view class="price">
                                            <view class="dollor">￥</view>
                                            {{ selectedStyle.Promotion }}
                                        </view>
                                        <view class="promotion">
                                            <view class="dollor">￥</view>
                                            {{ selectedStyle.Price }}
                                        </view>
                                    </block>
                                    <block v-else>
                                        <view class="price">
                                            <view class="dollor">￥</view>
                                            {{ selectedStyle.Price }}
                                        </view>
                                    </block>
                                </view>
                                <view class="discountBox" v-if="selectedStyle.Discounts > 0">
                                    <view class="disPrice">已优惠{{ selectedStyle.Discounts }}</view>
                                </view>
                                <view class="obj_select">
                                    <text class="obj_selected">已选</text>
                                    <text class="obj_text">
                                        {{ selectedStyle.Style }}，{{ quantity }}份
                                    </text>

                                </view>
                            </view>
                            <view class="obj_close" @tap="closePopup">
                                <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721635178667747.png"
                                    mode=""></image>
                            </view>
                        </view>
                        <view class="obj_head">
                            <view class="obj_title">选择规格</view>
                            <view class="obj_specs">
                                <view class="obj_spec" v-for="(spec, index) in ProductsList" :key="index"
                                    :class="{ obj_spec1: index === selectedSpecIndex }" @click="selectSpec(index)">
                                    {{ spec.Style }}
                                </view>
                            </view>
                        </view>
                        <view class="obj_body" style="margin: 0;">
                            <view class="obj_title">选择数量</view>
                            <view class="obj_number">
                                <view class="obj_compute minus">
                                    <image :src="minusImage" mode="" @tap="decrease"></image>
                                </view>
                                <input type="number" :value="quantity" min="1" :max="shopDetails.stock"
                                    @change="handleQuantityChange" />
                                <view class="obj_compute plus">
                                    <image :src="plusImage" mode="" @tap="increase"></image>
                                </view>
                            </view>
                        </view>
                        <block v-if="payType == 0">
                            <view class="address_box" @click="nav_to('/pages/Myaddress/selectAddress?type=1')">
                                <view class="address_cell">
                                    <view class="icon">
                                        <image
                                            src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1722933899855827.png"
                                            mode="aspectFill"></image>
                                    </view>
                                    <view class="address_content">
                                        <view class="cell_name">
                                            {{ myAddress ? `${myAddress.Accepter} ${myAddress.Phone}` : '请选择收货地址' }}
                                        </view>
                                        <uni-icons type="right" size="14"></uni-icons>
                                    </view>
                                </view>
                                <view class="address_cell" v-if="myAddress">
                                    <view class="icon"></view>
                                    <view class="address_content">
                                        <view class="cell_name cell_lit">
                                            {{ myAddress.Province }}{{ myAddress.City }}{{ myAddress.Area || '' }}{{
                                                myAddress.Address }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </block>
                        <view class="obj_bottom">
                            <view class="obj_btn2" @click="cart_add()">加入购物车</view>
                        </view>
                    </view>
                </uni-popup>
            </block>
        </view>
    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            load: false, //是否加载
            searchContent: "",//搜索的内容,
            fixboxHeight: 510,
            scrollTop: 0,
            chooseCate: {
                CataName: "水果",
                ID: 1,
                PlatCommission: 0.03,
                index: 0,
            },
            cateList: [],
            bannerList: [ //轮播图
                {
                    Banner: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/172135793140583.png'
                },
                {
                    Banner: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/172135793140583.png'
                },
            ],
            shopList: [],
            shopDetails: {},
            myAddress: {},
            selectedStyle: {}, // 规格（选定的规格的所有信息））
            quantity: 1,
            stock: 0, // 库存（对比可购买量）
            stylesList: [], // 选择规格（只有规格）
            ProductsList: [], // 规格（所有信息）
            selectedSpecIndex: 0, // // 当前选定的规格
            selectedStyle: {}, // 规格（选定的规格的所有信息））
            ProductStyleList: [],
            PageIndex: 1, //页码
            PageSize: 30,
            isMore: true, //是否还有更多
        };
    },
    computed: {
        minusImage() {
            return this.quantity > 1
                ? 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/172162992121443.png'
                : 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/172162990142299.png';
        },
        plusImage() {
            return this.quantity < this.stock
                ? 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721629860962316.png'
                : 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721629877490898.png';
        },
    },
    watch: {},
    async onShow() {
        this.getMyAddress()

    },
    async onLoad(e) {
        const that = this
        await that.getCategorizeList()
        that.chooseCate = { ...that.cateList[0], index: 0 }
      
        this.$nextTick(() => {
            that.getHeight()

        })
        await that.getShopList()

    },
    onReachBottom() {

    },
    onUnload() {

    },
    onPageScroll(e) {
        // console.log(e.scrollTop);
        this.isNav = e.scrollTop > 325 ? true : false
    },
    methods: {
        async getShopList() {
            let res = await this.$api.post('Products/SearchByCatalog', {
                PageIndex: this.PageIndex,
                PageSize: this.PageSize,
                ShopID: 0,
                ProductCatalog: this.chooseCate.ID
            })

            if (res.code == 0) {
                this.shopList = this.PageIndex == 1 ? this.shopList = res.data : this.shopList.concat(res.data)
                setTimeout(() => {
                    this.load = true;
                }, 500);
               
            }

            this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
        },
        async getCategorizeList() {
            let res = await this.$api.post('Products/GetProductCatalog')
            if (res.code == 0) {
                this.cateList = res.data
            }
        },
        clickCate(e, index) {
            const that = this
            if (that.chooseCate.index != index) {
                that.PageIndex = 1
                that.isMore = true
                that.chooseCate = { ...e, index }
                that.getShopList()
            }
        },
        async getMyAddress() {
            let res = await this.$api.post('UserAddress/MyDefaultAddress')
            this.myAddress = res.data || false
        },
        // 获取商品详细信息
        async getDetails(id) {
            let res = await this.$api.post('/Products/Detail', {
                ID: id,
            });

            if (res.code == 0) {
                this.shopDetails = res.data;
                this.stock = res.data.Stock;
                this.stylesList = res.data.ProductStyleList.map((item) => item.Style);
                this.ProductsList = res.data.ProductStyleList;
                this.selectedStyle = res.data.ProductStyleList[0];
                this.specImg = res.data.Images.split(',')[0];
            }

        },
        scrolltolower(e) {
            if (this.isMore) {
                this.PageIndex++;
                this.getShopList();
            }

        },
        async addShop(e) {
            this.getDetails(e.ID)
            this.$refs.buyNember.open();
        },
        //加入购物车
        async cart_add() {
            let res = await this.$api.post('ShopCard/Add', {
                ProductID: this.shopDetails.ID,
                Qty: this.quantity,
                ProductStyle: this.selectedStyle.Style,
                Price: this.selectedStyle.Promotion > 0 ? this.selectedStyle.Promotion : this.selectedStyle.Price,
                ProductImgs: this.shopDetails.Images.split(',')[0],
                Discounts: this.selectedStyle.Discounts,
                SKUID: this.selectedStyle.ID,
                Promotion: this.selectedStyle.Promotion,
            })
            if (res.code == 0) {
                this.$pv.msg('加入成功')
                this.closePopup()
            } else {
                this.$pv.msg(res.message)
            }
        },
        closePopup() {
            this.$refs.buyNember.close();
            setTimeout(() => {
                this.quantity = 1;
            }, 1000);
        },

        async decrease() {
            if (this.quantity > 1) {
                const yes = await this.getShopPrice(this.quantity - 1)
                if (yes) {
                    this.quantity--;
                }

            }
        },
        async increase() {
            if (this.quantity < this.stock) {
                const yes = await this.getShopPrice(this.quantity + 1)
                if (yes) {
                    this.quantity++;
                }

            }
        },
        handleQuantityChange(event) {
            this.quantity = Math.max(1, Math.min(event.target.value, this.stock));
        },
        // 获取价格
        async getShopPrice(num = 1) {
            return new Promise(async (resolve, reject) => {
                const that = this
                const res = await this.$api.post('/Products/GetProductPromotion', {
                    ProductID: that.shopDetails.ID,
                    Qty: num
                });
                const { code, data, msg } = res
                if (code == 0) {
                    that.shopDetails.ProductStyleList = data
                    that.ProductsList = data;
                    that.selectedStyle = data[that.selectedSpecIndex]

                    resolve(true)
                } else {
                    that.$pv.msg(msg)
                    resolve(false)
                }

            });

        },
        // 选择规格
        selectSpec(index) {
            this.selectedSpecIndex = index; //更改点击的规格成为新的选定规格
            this.selectedStyle = this.ProductsList[index];
        },
        getPayCount(item) {
            return item > 1000 ? (item / 1000).toFixed(1) + 'k' : item > 1000000 ? (item / 1000000).toFixed(1) + 'M' : item > 100000000 ? (item / 100000000).toFixed(1) : item
        },
        // 点击跳转详情
        goDetail(id) {
            this.nav_to(`/pages/shop/detail?id=${id}`)
        },
        getHeight() {
            let that = this;
            setTimeout(() => {
                const query = uni.createSelectorQuery().in(that);
                query.select('.navBox').boundingClientRect(data => {
                    if (data) {
                        // data.height 就是元素的高度
                        that.fixboxHeight = data.height;
                    }
                }).exec();
            }, 500);

        },
    }
};
</script>

<style lang="scss">
page {
    background-color: #f6f6f6;
    overflow: hidden;
}

view {
    box-sizing: border-box;
}

.categorizeBox {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .loadBox{
        width: 100%;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        background: white;
        padding-top: 200rpx;
        z-index: 999;
    }
}

.navBox {
    // position: fixed;
    width: 100%;
    box-sizing: border-box;
    // top: 0;
    // left: 0;
    // z-index: 999;
    // width: 750rpx;
    // height: 712rpx;
    // margin-bottom: 20rpx;
    background: linear-gradient(182deg, #FF471A 0%, #FF7B24 40%, #F6F6F6 100%);

    .tabsBack {
        height: 44px;
        display: flex;
        align-items: center;

        // justify-content: center;
        // padding-left: 16rpx;
        .logoimg {
            width: 192rpx;
            height: 48rpx;
            margin-left: 24rpx;
        }
    }

    .searchCell {
        width: 702rpx;
        height: 72rpx;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 36rpx;
        margin: 0 auto;

        .scIcon {
            margin-right: 16rpx;
        }

        .searchimg {
            width: 32rpx;
            height: 32rpx;
            margin-left: 32rpx;
        }

        .scInp {
            flex: 1;
            margin-left: 5rpx;

            >input {
                width: 100%;
                background: transparent;
                margin-left: 16rpx;
            }

            .placname {
                color: #999999;
                font-size: 28rpx;
                // margin-left: 16rpx;
            }
        }

        .scBtnBox {
            display: flex;
            // margin-left: auto;
            margin-right: 8rpx;

            .scSumBtn {
                padding: 13rpx 34rpx;
                background: #FF6030;
                border-radius: 32rpx;
                font-weight: 500;
                font-size: 24rpx;
                color: #ffffff;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;

                &:last-child {
                    margin-left: 20rpx;
                }
            }
        }
    }
}

.cateBox {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    border-top-right-radius: 24rpx;
    border-top-left-radius: 24rpx;
    box-shadow: 0 8px 16px rgba(128, 128, 128, 0.5);

    .cateLeft {
        width: 30%;
        height: 100%;
        background: #fff;
        display: flex;
        flex-direction: column;

        .clCell {
            width: 100%;
            background-color: #f5f6f9;
            overflow: hidden;
            border-right: 2rpx solid #eaebee;
            border-top: 2rpx solid #f5f6f9;
            border-bottom: 2rpx solid #f5f6f9;

            // box-shadow: inset 0 0 10px 5px rgba(128, 128, 128, 0.5);
            .clCTit {
                width: 100%;
                padding: 20rpx 6rpx;
                text-align: center;
            }
        }

        .clCellActive {
            background: #FFFFFF;
            border-right: 2rpx solid #ffffff;
            border-top: 2rpx solid #ffffff;
            border-bottom: 2rpx solid #ffffff;
        }

        .clCellAcTop {
            border-bottom-right-radius: 16rpx;
            border-bottom: 2rpx solid #eaebee;
        }

        .clCellAcBottom {
            border-top-right-radius: 16rpx;
            border-top: 2rpx solid #eaebee;
        }

        .clBgBox {
            width: 100%;
            flex: 1;
            background-color: #f5f6f9;
            border-right: 2rpx solid #eaebee;
        }
    }

    .cateRight {
        width: 70%;
        height: 100%;
        background-color: #FFFFFF;

        .shopBox {
            width: 100%;
            padding: 20rpx;

            .shopSwiper {
                width: 100%;

                .barimg {
                    width: 100%;
                    height: 200rpx;
                    display: block;
                    margin: 20rpx auto;

                    swiper-item {
                        width: 100%;
                        height: 100%;
                        border-radius: 16rpx;
                        overflow: hidden;

                        >image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                }
            }

            .shopBoxList {
                width: 100%;
                display: flex;
                flex-wrap: wrap;

                .shopCellBox {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    margin-bottom: 20rpx;
                }

                .heat_shop {
                    width: 100%;
                    position: relative;
                    display: flex;

                    .good_label {
                        position: absolute;
                        top: 0;
                        left: 0;
                        padding: 8rpx 12rpx;
                        background-color: #FF471A;
                        color: #fff;
                        font-size: 16rpx;
                        border-radius: 16rpx 0 16rpx 0;
                    }

                    .good_label_green {
                        background-color: #1ed68d;
                    }

                    .heat_spimg {
                        width: 200rpx;
                        min-width: 200rpx;
                        max-width: 200rpx;
                        height: 200rpx;
                        // background-color: red;
                        border-radius: 16rpx;

                    }

                    .right_shop {
                        width: calc(100% - 200rpx);
                        min-width: calc(100% - 200rpx);
                        max-width: calc(100% - 200rpx);
                        padding: 0 10rpx;
                        display: flex;
                        flex-direction: column;
                    }

                    .heat_spname {
                        width: 100%;
                        height: 68rpx;
                        font-size: 24rpx;
                        display: -webkit-box;
                        /* 设置为WebKit内核的弹性盒子模型 */
                        -webkit-box-orient: vertical;
                        /* 垂直排列 */
                        -webkit-line-clamp: 2;
                        /* 限制显示两行 */
                        overflow: hidden;
                        /* 隐藏超出范围的内容 */
                        text-overflow: ellipsis;
                        /* 使用省略号 */

                    }

                    .heat_price_box {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-top: auto;

                        .heat_payCount {
                            font-size: 18rpx;
                            color: #999;
                        }
                    }

                    .shopBtnBox {
                        width: 100%;
                        display: flex;
                        align-items: baseline;

                        .heat_payCount {
                            font-size: 18rpx;
                            color: #999;
                        }

                        .shopAddBtn {
                            // width: 200rpx;
                            background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 20rpx;
                            padding: 10rpx 26rpx;
                            margin-left: auto;

                            .pay_icon {
                                width: 34rpx;
                                height: 34rpx;
                                display: block;
                            }

                            .pay_text {
                                font-size: 24rpx;
                                color: #FFFFFF;
                            }
                        }
                    }

                    .heat_price {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #FF6030;
                    }

                    .pr_icon {
                        font-size: 20rpx;
                        font-weight: bold;
                        color: #FF6030;
                    }
                }
            }
        }
    }
}

.obj_choose {
    width: 100%;
    // height: 948rpx;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 30rpx;
    background-color: #fff;
    padding-bottom: 200rpx;
    position: relative;

    .obj_preview {
        display: flex;
        justify-content: space-between;

        .obj_img {
            width: 176rpx;
            height: 176rpx;
            overflow: hidden;
            border-radius: 5rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .obj_info {
            // padding-top: 74rpx;
            width: 65%;
            min-height: 176rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .obj_price {
                font-size: 48rpx;
                color: #f91c1c;
                font-weight: bold;
                line-height: 66rpx;
                display: flex;
                align-items: baseline;

                .obj_price_text {
                    color: #f91c1c;
                    font-weight: bold;
                    font-size: 22rpx;
                }

                .price {
                    display: flex;
                    color: #f91c1c;

                    .dollor {
                        font-size: 35rpx;
                        color: #f91c1c;
                    }
                }

                .promotion {
                    display: flex;
                    font-size: 28rpx;
                    color: #ccc;
                    text-decoration: line-through;
                    margin-left: 14rpx;

                    .dollor {
                        font-size: 28rpx;
                        color: #ccc;
                    }
                }
            }

            .discountBox {
                width: 100%;
                display: flex;

                .disPrice {
                    border: 2rpx solid #ff6030;
                    color: #ff6030;
                    font-size: 20rpx;
                    padding: 4rpx 14rpx;
                    border-radius: 10rpx;
                }
            }

            .obj_select {

                // line-height: 40rpx;
                display: inline-block;

                text {
                    font-size: 28rpx;
                }

                .obj_selected {
                    color: #999999;
                    margin-right: 15rpx;
                }

                .obj_text {
                    flex: 1;
                    color: #333333;
                }
            }
        }

        .obj_close {
            width: 40rpx;
            height: 40rpx;
            background: #eeeeee;
            border-radius: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            image {
                width: 40rpx;
                height: 40rpx;
            }
        }
    }

    .obj_head {
        display: flex;
        flex-direction: column;
        margin: 30rpx 0;

        .obj_title {
            font-size: 28rpx;
            color: #0d0d0d;
            font-weight: bold;
        }

        .obj_specs {
            // display: flex;
            margin: 20rpx 0 20rpx -10rpx;
            max-height: 270rpx;
            overflow-y: scroll;

            .obj_spec {
                max-width: max-content;
                height: 56rpx;
                padding: 0px 25rpx;
                background: #f2f2f2;
                border: 2rpx solid #f2f2f2;
                border-radius: 28rpx;
                font-size: 24rpx;
                color: #0d0d0d;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 10rpx;
                margin-bottom: 10rpx;
            }

            .obj_spec1 {
                background: #fff5f2;
                border: 2rpx solid #ff6030;
                color: #ff6030;
            }
        }
    }

    .gifts_tips {
        font-size: 28rpx;
        color: #666666;
    }

    .obj_body {
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;

        .obj_title {
            font-size: 28rpx;
            color: #0d0d0d;
            font-weight: bold;
        }

        .obj_number {
            display: flex;
            justify-content: center;
            align-items: center;
            // width: 120rpx;
            height: 40rpx;

            .obj_compute {
                width: 66rpx;
                height: 66rpx;
                margin: 0px 5rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                image {
                    width: 80%;
                    height: 80%;
                }
            }

            input {
                width: 110rpx;
                background: #f2f2f2;
                border-radius: 8rpx;
                text-align: center;
                font-size: 24rpx;
                color: #0d0d0d;
                height: 50rpx;
                line-height: 50rpx;
            }
        }

        .obj_inp {
            width: 60%;

            input {
                width: 100%;
                background-color: transparent;
                font-size: 28rpx;
                color: #000;
                text-align: right;
            }

            .input-placeholder {
                font-size: 28rpx;
            }
        }
    }

    .obj_tips {
        font-size: 24rpx;
        color: #999999;
        margin: 4rpx 0 20rpx 0;
    }

    .obj_bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        bottom: 70rpx;
        left: 0;
        width: 100%;
        padding: 0rpx 40rpx;

        .obj_left {
            display: flex;
            align-items: center;

            text {
                font-size: 28rpx;
                color: #333333;
            }

            .obj_total {
                font-size: 48rpx;
                color: #f91c1c;
                font-weight: bold;
                display: flex;
                align-items: center;

                .dollor {
                    font-size: 35rpx;
                    color: #f91c1c;
                }
            }
        }

        .obj_btn {
            font-size: 32rpx;
            color: #ffffff;
            width: 272rpx;
            height: 88rpx;
            background: linear-gradient(98deg, #ffad26 0%, #fe4e01 100%);
            border-radius: 44rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .obj_btn2 {
            font-size: 32rpx;
            color: #ffffff;
            width: 100%;
            height: 88rpx;
            background: linear-gradient(98deg, #ffad26 0%, #fe4e01 100%);
            border-radius: 44rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>